<template>
    <view class="topBox">
        <userHeader :time="new Date().getTime()" />
    </view>

    <view class="options">
        <view class="item" @click="optionsInfo(item.url, index)" v-for="(item, index) in options" :key="index">
            <view class="itemName">
                <image class="icon" :src="item.iconPath"></image>
                <span>{{ item.name }}</span>
            </view>

            <view class="tag" v-if="index == 0">
                <template v-if="identityType == 4">
                    <view class="tag">
                        <text v-if="CompanyInfo?.status == 0 && CompanyInfo?.companyName" class="blue">审核中</text>
                        <text v-else-if="CompanyInfo?.status == 1" class="blue">绑定成功</text>
                        <text v-else-if="CompanyInfo?.status == -1" class="red">审核失败，请重新绑定</text>
                        <text v-else class="red">未绑定</text>
                    </view>
                </template>
                <template v-else>
                    <text v-if="binddingInfomation?.xmtrBankStatus == 0" class="blue">待审核</text>
                    <text v-else-if="binddingInfomation?.xmtrBankStatus == 1" class="blue">审核中</text>
                    <text v-else-if="binddingInfomation?.xmtrBankStatus == 2" class="blue">绑定成功</text>
                    <text v-else-if="binddingInfomation?.xmtrBankStatus == 3" class="red">审核失败</text>
                    <text v-else class="red">未绑定</text>
                </template>
            </view>

            <template v-if="index == 1">
                <template v-if="identityType == 4">
                    <view class="tag">
                        <text v-if="CompanyInfo?.status == 0 && CompanyInfo?.companyName" class="blue">认证信息待审核</text>
                        <text v-else-if="CompanyInfo?.status == 1" class="blue">认证成功</text>
                        <text v-else-if="CompanyInfo?.status == -1" class="red">认证信息审核失败，请重新认证</text>
                        <text v-else class="red">未认证，请进行企业身份认证</text>
                    </view>
                </template>

                <template v-else>
                    <view class="tag">
                        <text v-if="binddingInfomation?.xmtrStatus == 0" class="blue">待审核</text>
                        <text v-else-if="binddingInfomation?.xmtrStatus == 1" class="blue">审核中</text>
                        <text v-else-if="binddingInfomation?.xmtrStatus == 2" class="blue">实名认证成功</text>
                        <text v-else-if="binddingInfomation?.xmtrStatus == 3" class="red">实名认证失败</text>
                        <text v-else class="red">未认证，请进行实名认证</text>
                    </view>
                </template>
            </template>

            <image class="more" src="/static/common/icon_more.png"></image>
        </view>
    </view>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue';
import { onLoad, onShow } from '@dcloudio/uni-app';
import { userApis } from '../../utils/apis';

const options = ref([
    {
        url: '/pages_user/account/account',
        name: '我的账户',
        iconPath: '/static/user_options_icon1.png'
    },
    {
        url: '/pages_user/realNameAuth/realNameAuth',
        name: '实名认证',
        iconPath: '/static/user_options_icon2.png'
    },
    {
        url: '/pages_user/setting/setting',
        name: '设置',
        iconPath: '/static/user_options_icon3.png'
    }
]);

// 银行卡信息
const binddingInfomation = ref(null);
const getBinddingList = async () => {
    let res = await userApis.getBankDetail();
    binddingInfomation.value = res.data;
    console.log(binddingInfomation.value);
};

// 企业用户 公司信息
const CompanyInfo = ref(null);
const identityType = ref(null);
onShow(async () => {
    identityType.value = JSON.parse(uni.getStorageSync('userInfomation')).identityType;
    if (identityType.value == '4') {
        let res = await userApis.getCompanyInfo();
        CompanyInfo.value = res.data;
        options.value[1] = {
            url: res.data.companyName ? '/pages_user/companyDetail/companyDetail' : '/pages_user/setCompanyDetail/setCompanyDetail',
            name: '企业身份认证',
            iconPath: '/static/user_options_icon2.png'
        };
    } else {
        options.value[1] = {
            url: '/pages_user/realNameAuth/realNameAuth',
            name: '实名认证',
            iconPath: '/static/user_options_icon2.png'
        };

        getBinddingList();
    }
});

const optionsInfo = (url, index) => {
    if (index == 1) {
        if (identityType.value == '4' && !CompanyInfo.value.companyName) {
            if (CompanyInfo.value.status === -1) {
                uni.navigateTo({
                    url: '/pages_user/companyDetail/companyDetail'
                });
            } else {
                uni.navigateTo({
                    url: '/pages_user/setCompanyDetail/setCompanyDetail'
                });
            }
            return;
        }
    }

    uni.navigateTo({
        url: url
    });
};
</script>

<style lang="scss" scoped>
.topBox {
    background: linear-gradient(60deg, #e8f6ff 0%, #f2f3f5 100%);
    padding: 160rpx 0 90rpx;
}

.options {
    width: 100vw;
    margin-top: -10rpx;
    height: calc(100vh - 160rpx - 90rpx - 108rpx + 10rpx);
    background: #ffffff;
    border-radius: 24rpx 24rpx 0rpx 0rpx;

    .item {
        height: 108rpx;
        width: 100%;
        padding-left: 24rpx;
        padding-right: 44rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .itemName {
            display: flex;
            align-items: center;
            gap: 20rpx;
            font-weight: 400;
            font-size: 28rpx;
            line-height: 48rpx;
            color: #333333;
            .icon {
                width: 48rpx;
                height: 48rpx;
            }
        }

        .tag {
            margin-left: auto;
            font-size: 20rpx;
            color: #333;
            .blue {
                display: block;
                background-color: #2c72ff;
                border-radius: 8rpx;
                padding: 0 12rpx;
                height: 36rpx;
                line-height: 36rpx;
                color: #ffffff;
            }
            .red {
                display: block;
                background-color: #ff6543;
                color: #ffffff;
                border-radius: 8rpx;
                padding: 0 12rpx;
                height: 36rpx;
                line-height: 36rpx;
            }
        }

        .more {
            margin-left: 20rpx;
            width: 24rpx;
            height: 24rpx;
        }
    }
}
</style>
